﻿

@{
    Layout = null;
    List<string> listPath = ViewBag.listPath;
    List<string> listId = ViewBag.listId;
}

<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - Blueimp相册</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">


    <link rel="shortcut icon" href="favicon.ico">
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">

    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">

    <style>
        img, #labelId {
            margin: 5px;
            width: 160px;
            height: 160px;
        }

        .imgDiv {
            display: inline-block;
            position: relative;
        }

        .delete {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 20px;
            height: 20px;
            display: none;
        } 
        #spanId {
            margin-top: 65px;
        }
    </style>

</head>

<body class="gray-bg">
    <input type="hidden" name="GroupID" id="GroupID" value="@ViewBag.GroupID" />
    <input type="hidden" name="InterfixID" id="InterfixID" value="@ViewBag.InterfixID" />
    <input type="hidden" name="ImageType" id="ImageType" value="@ViewBag.ImageType" />
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">

                    <div class="ibox-content">

                        <h2>相册</h2>

                        <div class="lightBoxGallery">
                            @for (int i = 0; i < listPath.Count; i++)
                            {
                                <div class="imgDiv"> 
                                    <a href="@listPath[i]" title="图片" data-gallery=""><img src="@listPath[i]" id="imgID"></a> 
                                    <img class="glyphicon glyphicon-trash delete" aria-hidden="true" id="deleteBtn" onclick="dlt(@listId[i])" src="~/Content/Images/deletepic.png" />
                                </div>
                            }
                            <div id="blueimp-gallery" class="blueimp-gallery">
                                <div class="slides"></div>
                                <h3 class="title"></h3>
                                <a class="prev">‹</a>
                                <a class="next">›</a>
                                <a class="close">×</a>
                                <a class="play-pause"></a>
                                <ol class="indicator"></ol>
                            </div>
                            <label title="上传图片" for="inputImage" class="btn btn-primary" id="labelId">
                                @*可选多张图片 multiple="multiple"*@
                                <input type="file" name="inputImage" id="inputImage" class="hide" multiple="multiple">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true" id="spanId"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <script src="~/Scripts/ajaxfileupload.js?@DateTime.Now.ToString("yyyyMMddHHmmssfff")"></script>
    <!-- 自定义js -->
    <script src="~/Scripts/content.js?v=1.0.0"></script>

    <!-- blueimp gallery -->
    <script src="~/Scripts/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>

    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <!--统计代码，可删除-->
    <script type="text/javascript">
        $(function () {
            init();

            $('[type=file]').change(function (e) {
                ajaxFileUpload();
            });
        });

        function init() {
            $(".imgDiv").mouseenter(function () {
                $(this).find(".delete").show();

            });
            $(".imgDiv").mouseleave(function () {
                $(this).find(".delete").hide();
            });
        }
        //上传图片
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '/Images/ProcessImgUpload', //用于文件上传的服务器端请求地址
                    type: 'post',
                    data: { GroupID: $('#GroupID').val(), InterfixID: $('#InterfixID').val(), ImageType: $('#ImageType').val() },
                    secureuri: false, //一般设置为false
                    fileElementId: 'inputImage', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'JSON', //返回值类型 一般设置为json
                    success: function (data) {
                        window.location.reload();
                    }
                }
            )
            return false;
        }

        function dlt(e){
            var ids = e

            layer.confirm('您确定要删除所选数据吗', {
                btn: ['是的', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: '/Images/DeleteAsync',
                    type: "post",
                    dataType: "json",
                    data: { ids: ids },
                    success: function (data) {
                        //Info,Success,Warning,Error
                        var type = data.type;
                        if (type == 1) {
                            layer.msg(data.content,
                                {
                                    icon: 6, time: 2000
                                },
                                function () {
                                    window.location.reload();
                                });
                        } else {
                            layer.msg(data.content, { icon: 5, time: 2000 });
                        }
                    }
                });
            }, function () {
                return;
            });
        } 
    </script> 
</body>
</html>